<template>
  <div class="container">
    <div class="forms-container">
      <div class="signin-signup">
        <!-- 登录表单 -->
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="sign-in-form">
          <h2 class="title">登录</h2>
          <el-form-item prop="username" style="width: 300px">
            <el-input v-model="loginForm.username" placeholder="账号" style="width: 100%" @keyup.enter="handleLoginEnter('username')">
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password" style="width: 300px">
            <el-input v-model="loginForm.password" :type="showPassword ? 'text' : 'password'" placeholder="密码" style="width: 100%" @keyup.enter="handleLoginEnter('password')">
              <template #prefix>
                <el-icon><Key /></el-icon>
              </template>
              <template #suffix>
                <el-icon class="cursor-pointer" @click="showPassword = !showPassword">
                  <component :is="showPassword ? 'View' : 'Hide'" />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="captcha" style="width: 300px">
            <div class="captcha-container">
              <el-input v-model="loginForm.captcha" placeholder="验证码" style="width: 65%" @keyup.enter="handleLoginEnter('captcha')"></el-input>
              <div class="captcha-img" @click="refreshCaptcha" style="width: 35%; margin-left: 2%; height: 40px; display: flex; align-items: center; justify-content: center; background: #f5f7fa; border-radius: 4px; cursor: pointer; padding: 0 5px;">
                <canvas ref="captchaCanvas" width="120" height="36"></canvas>
              </div>
            </div>
          </el-form-item>
          <el-button type="primary" class="btn" @click="submitLogin" :loading="loading">登录</el-button>

          <div class="social-media" style="margin-top: 20px; display: flex; align-items: center; gap: 20px;">
            <span style="font-size: 14px; color: #666; margin-right: 10px;">或使用第三方登录：</span>
            <el-button
              native-type="button"
              class="social-icon"
              @click="giteeLogin"
              v-ripple="false"
              style="background: #f5f5f5; border: none; margin: 0 8px; padding: 6px;">
              <img
                src="../assets/images/gitee.svg"
                alt="Gitee"
                style="height: 100x; width: 100px; vertical-align: middle;"
              />
            </el-button>
          </div>
          
        </el-form>

        <!-- 注册表单 -->
        <el-form ref="registerFormRef" :model="registerForm" :rules="registerRules" class="sign-up-form">
          <h2 class="title">注册</h2>
          <el-form-item prop="accountName" style="width: 300px">
            <div style="display: flex; gap: 10px;">
              <el-input v-model="registerForm.accountName" placeholder="账户名" style="width: 100%" @blur="checkAccountNameExists" @keyup.enter="handleRegisterEnter('accountName')">
                <template #prefix>
                  <el-icon><User /></el-icon>
                </template>
              </el-input>
              <el-button @click="generateRandomAccountName" style="white-space: nowrap;" @keyup.ctrl.q.prevent="generateRandomAccountName">随机生成(Q)</el-button>
            </div>
          </el-form-item>
          <el-form-item prop="username" style="width: 300px">
            <el-input v-model="registerForm.username" placeholder="账号" style="width: 100%" @blur="checkUsernameExists" @keyup.enter="handleRegisterEnter('username')">
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password" style="width: 300px">
            <el-input v-model="registerForm.password" :type="showPassword ? 'text' : 'password'" placeholder="密码" style="width: 100%" @keyup.enter="handleRegisterEnter('password')">
              <template #prefix>
                <el-icon><Key /></el-icon>
              </template>
              <template #suffix>
                <el-icon class="cursor-pointer" @click="showPassword = !showPassword">
                  <component :is="showPassword ? 'View' : 'Hide'" />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="confirmPassword" style="width: 300px">
            <el-input v-model="registerForm.confirmPassword" :type="showPassword ? 'text' : 'password'" placeholder="确认密码" style="width: 100%" @keyup.enter="handleRegisterEnter('confirmPassword')">
              <template #prefix>
                <el-icon><Key /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-button type="primary" class="btn" @click="handleRegister">注册</el-button>
          <p class="social-text">或使用社交平台注册</p>
        </el-form>
      </div>
    </div>

    <div class="panels-container">
      <div class="panel left-panel">
        <div class="content">
          <h3>还没有账号？</h3>
          <p>如果您还没有账号，请填写以下信息进行注册。</p>
          <el-button class="btn transparent" @click="toggleForm('register')">注册</el-button>
        </div>
        <img src="../assets/images/3.svg" class="image" alt="" />
      </div>

      <div class="panel right-panel">
        <div class="content">
          <h3>已有账号？</h3>
          <p>如果您已经有账号，请使用用户名和密码登录。</p>
          <el-button class="btn transparent" @click="toggleForm('login')">登录</el-button>
        </div>
        <img src="../assets/images/4.svg" class="image" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, Key, Phone, View, Hide } from '@element-plus/icons-vue'
import axios from 'axios'

const router = useRouter()
const loginFormRef = ref(null)
const registerFormRef = ref(null)
const captchaCanvas = ref(null)
const loading = ref(false)
const captchaText = ref('')
const showPassword = ref(false)

// 切换登录/注册表单
const toggleForm = (mode) => {
  const container = document.querySelector('.container')
  if (mode === 'register') {
    container.classList.add('sign-up-mode')
  } else {
    container.classList.remove('sign-up-mode')
  }
}

// 登录表单数据
const loginForm = reactive({
  username: '',
  password: '',
  captcha: ''
})

// 注册表单数据
const registerForm = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  accountName: ''
})

const giteeLogin = () => {
  // 跳转到后端提供的 Gitee OAuth 授权地址
  window.location.href = 'http://127.0.0.1:5000/api/oauth/gitee/login';
}

// 检查账户名是否存在
const checkAccountNameExists = async () => {
  if (!registerForm.accountName) return
  try {
    const response = await axios.post('http://127.0.0.1:5000/api/users/aisExist', {
      account_name: registerForm.accountName
    })
    accountNameExists.value = response.data.status === 200
    if (accountNameExists.value) {
      ElMessage.warning('该账户名已存在，请更换')
      registerForm.accountName = ''
    }
  } catch (error) {
    if (error.response?.status === 404) {
      accountNameExists.value = false
    } else {
      console.error('检查账户名失败:', error)
      ElMessage.error('检查账户名失败，请稍后重试')
    }
  }
}

// 检查账号是否存在
const checkUsernameExists = async () => {
  if (!registerForm.username) return
  try {
    const response = await axios.post('http://127.0.0.1:5000/api/users/uisExist', {
      username: registerForm.username
    })
    usernameExists.value = response.data.status === 200
    if (usernameExists.value) {
      ElMessage.warning('该账号已存在，请更换')
      registerForm.username = ''
    }
  } catch (error) {
    if (error.response?.status === 404) {
      usernameExists.value = false
    } else {
      console.error('检查账号失败:', error)
      ElMessage.error('检查账号失败，请稍后重试')
    }
  }
}

// 账户名和账号验证状态
const accountNameExists = ref(false)
const usernameExists = ref(false)

// 生成随机账户名
const generateRandomAccountName = () => {
  const adjectives = ['Clever', 'Super', 'Happy', 'Brave', 'Cool', 'Smart', 'Lucky', 'Fast', 'Quiet', 'Sharp']
  const nouns = ['Player', 'Fan', 'Hero', 'Coder', 'Runner', 'Tiger', 'Gamer', 'Rider', 'Wizard', 'Seeker']

  const adj = adjectives[Math.floor(Math.random() * adjectives.length)]
  const noun = nouns[Math.floor(Math.random() * nouns.length)]
  const number = Math.floor(Math.random() * 900) + 100 // 保证是100~999的三位数字

  registerForm.accountName = `${adj}${noun}${number}`
}


// 登录表单验证规则
const loginRules = {
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  ],
  captcha: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { validator: validateCaptcha, trigger: 'blur' }
  ]
}

// 注册表单验证规则
const registerRules = {
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, message: '用户名长度不能小于3位', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { validator: (rule, value, callback) => {
      if (value !== registerForm.password) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }, trigger: 'blur' }
  ],
  accountName: [
    { required: true, message: '请输入账户名', trigger: 'blur' },
    { min: 3, message: '账户名长度不能小于3位', trigger: 'blur' }
  ]
}

// 验证码相关
function validateCaptcha(rule, value, callback) {
  if (value.toLowerCase() !== captchaText.value.toLowerCase()) {
    callback(new Error('验证码错误'))
  } else {
    callback()
  }
}

// 验证码倒计时
const isCountingDown = ref(false)
const countDown = ref(60)
const countDownText = ref('获取验证码')

// 发送验证码
const sendCode = async () => {
  try {
    if (!registerForm.phone) {
      ElMessage.warning('请先输入手机号码')
      return
    }
    // 这里添加发送验证码的接口调用
    isCountingDown.value = true
    const timer = setInterval(() => {
      if (countDown.value > 0) {
        countDown.value--
        countDownText.value = `${countDown.value}秒后重发`
      } else {
        clearInterval(timer)
        isCountingDown.value = false
        countDown.value = 60
        countDownText.value = '获取验证码'
      }
    }, 1000)
  } catch (error) {
    console.error('发送验证码失败:', error)
    ElMessage.error('发送验证码失败')
  }
}

function generateCaptcha() {
  const canvas = captchaCanvas.value
  const ctx = canvas.getContext('2d')
  const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
  
  // 清空画布
  ctx.fillStyle = '#f0f0f0'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  
  // 生成随机验证码
  let code = ''
  for (let i = 0; i < 4; i++) {
    const char = chars[Math.floor(Math.random() * chars.length)]
    code += char
    
    // 随机颜色
    ctx.fillStyle = `rgb(${Math.floor(Math.random() * 150)}, ${Math.floor(Math.random() * 150)}, ${Math.floor(Math.random() * 150)})`
    ctx.font = `bold ${Math.floor(Math.random() * 3) + 18}px Arial`
    
    // 随机位置
    const x = 15 + i * 22 + Math.random() * 3
    const y = 24 + Math.random() * 3
    
    // 随机旋转
    const angle = (Math.random() - 0.5) * 0.3
    ctx.translate(x, y)
    ctx.rotate(angle)
    ctx.fillText(char, 0, 0)
    ctx.rotate(-angle)
    ctx.translate(-x, -y)
  }
  
  // 添加干扰线
  for (let i = 0; i < 3; i++) {
    ctx.strokeStyle = `rgb(${Math.floor(Math.random() * 200)}, ${Math.floor(Math.random() * 200)}, ${Math.floor(Math.random() * 200)})`
    ctx.beginPath()
    ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height)
    ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height)
    ctx.stroke()
  }
  
  // 添加干扰点
  for (let i = 0; i < 50; i++) {
    ctx.fillStyle = `rgb(${Math.floor(Math.random() * 200)}, ${Math.floor(Math.random() * 200)}, ${Math.floor(Math.random() * 200)})`
    ctx.beginPath()
    ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, 1, 0, 2 * Math.PI)
    ctx.fill()
  }
  
  captchaText.value = code
}

function refreshCaptcha() {
  generateCaptcha()
  loginForm.captcha = ''
}

function submitLogin() {
  loginFormRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      try {
        const response = await axios.post('http://127.0.0.1:5000/api/users/login', {
          username: loginForm.username,
          password: loginForm.password
        })
        
        if (response.data.status === 200) {
          // 保存token和用户信息，确保is_admin作为数字存储
          localStorage.setItem('token', response.data.data.token)
          localStorage.setItem('userId', response.data.data.userid)
          localStorage.setItem('isAdmin', Number(response.data.data.is_admin))
          localStorage.setItem('username', response.data.data.username || '未知用户')

          ElMessage.success(response.data.msg)
          // 根据用户类型跳转到不同页面
          if (Number(response.data.data.is_admin) === 1) {
            await router.push('/admin')
          } else {
            await router.push('/user')
          }
        } else {
          ElMessage.error(response.data.msg || '登录失败')
          refreshCaptcha()
        }
      } catch (error) {
        console.error('登录错误:', error)
        ElMessage.error(error.response?.data?.msg || '登录失败，请稍后重试')
        refreshCaptcha()
      } finally {
        loading.value = false
      }
    } else {
      ElMessage.warning('请正确填写登录信息')
      return false
    }
  })
}

// 处理注册提交
const handleRegister = () => {
  registerFormRef.value.validate(async (valid) => {
    if (valid) {
      // 再次检查账户名和账号是否存在
      await checkAccountNameExists()
      await checkUsernameExists()
      
      if (accountNameExists.value) {
        ElMessage.warning('该账户名已存在，请更换')
        return
      }
      
      if (usernameExists.value) {
        ElMessage.warning('该账号已存在，请更换')
        return
      }
      
      loading.value = true
      try {
        const response = await axios.post('http://127.0.0.1:5000/api/users/register', {
          username: registerForm.username,
          password: registerForm.password,
          accountName: registerForm.accountName
        })
        
        if (response.data.status === 200) {
          ElMessage.success('注册成功，请登录')
          toggleForm('login')
          // 清空注册表单
          registerForm.username = ''
          registerForm.password = ''
          registerForm.confirmPassword = ''
          registerForm.accountName = ''
        } else {
          ElMessage.error(response.data.message || '注册失败')
        }
      } catch (error) {
        console.error('注册错误:', error)
        ElMessage.error(error.response?.data?.message || '注册失败，请稍后重试1')
      } finally {
        loading.value = false
      }
    } else {
      ElMessage.warning('请正确填写注册信息')
      return false
    }
  })
}

// 处理登录表单回车事件
const handleLoginEnter = (field) => {
  // 验证当前字段
  loginFormRef.value.validateField(field, (valid) => {
    if (!valid) {
      // 如果验证不通过，不执行后续操作
      return
    }
    
    // 根据当前字段决定下一步操作
    switch (field) {
      case 'username':
        // 跳到密码输入框
        document.querySelector('.sign-in-form input[type="password"]').focus()
        break
      case 'password':
        // 跳到验证码输入框
        document.querySelector('.captcha-container input').focus()
        break
      case 'captcha':
        // 提交登录表单
        submitLogin()
        break
    }
  })
}

// 处理注册表单回车事件
const handleRegisterEnter = (field) => {
  // 验证当前字段
  registerFormRef.value.validateField(field, (valid) => {
    if (!valid) {
      // 如果验证不通过，不执行后续操作
      return
    }
    
    // 根据当前字段决定下一步操作
    switch (field) {
      case 'accountName':
        // 跳到账号输入框
        document.querySelectorAll('.sign-up-form input')[1].focus()
        break
      case 'username':
        // 跳到密码输入框
        document.querySelectorAll('.sign-up-form input[type="password"]')[0].focus()
        break
      case 'password':
        // 跳到确认密码输入框
        document.querySelectorAll('.sign-up-form input[type="password"]')[1].focus()
        break
      case 'confirmPassword':
        // 提交注册表单
        handleRegister()
        break
    }
  })
}

// 全局键盘事件处理函数
const handleKeydown = (e) => {
  // 处理Ctrl+Q快捷键
  if (e.ctrlKey && e.key === 'q') {
    e.preventDefault() // 阻止默认行为
    if (document.querySelector('.container').classList.contains('sign-up-mode')) {
      // 如果在注册模式下，触发随机生成按钮
      generateRandomAccountName()
    }
  }
}

onMounted(() => {
  generateCaptcha()

  // 处理第三方登录回调URL中的token参数
  const urlParams = new URLSearchParams(window.location.search)
  const token = urlParams.get('token')
  const accountName = urlParams.get('username')
  const userId = urlParams.get('userid')
  const isAdmin = urlParams.get('is_admin') || '0'

  if (token && accountName) {
    // 确保存储的token包含Bearer前缀
    localStorage.setItem('token', token.startsWith('Bearer ') ? token : `Bearer ${token}`)
    localStorage.setItem('username', accountName)
    localStorage.setItem('userId', userId)
    localStorage.setItem('isAdmin', isAdmin)
    // 自动跳转到用户主页
    router.push('/user')
  }
  
  // 添加全局键盘事件监听
  window.addEventListener('keydown', handleKeydown)
})

// 组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener('keydown', handleKeydown)
})
</script>

<style scoped>
.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.forms-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signin-signup {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 75%;
  width: 50%;
  max-width: 800px;
  transition: 1s 0.7s ease-in-out;
  display: grid;
  grid-template-columns: 1fr;
  z-index: 5;
}

.sign-in-form,
.sign-up-form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0rem 5rem;
  transition: all 0.2s 0.7s;
  overflow: hidden;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.sign-up-form {
  opacity: 0;
  z-index: 1;
}

.sign-in-form {
  z-index: 2;
}

.title {
  font-size: 2.2rem;
  color: #444;
  margin-bottom: 10px;
}

.btn {
  width: 150px;
  height: 49px;
  border: none;
  outline: none;
  border-radius: 49px;
  cursor: pointer;
  background-color: #5995fd;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  margin: 10px 0;
  transition: .5s;
}

.btn:hover {
  background-color: #4d84e2;
}

.social-text {
  padding: .7rem 0;
  font-size: 1rem;
}

.social-media {
  display: flex;
  justify-content: center;
}

.social-icon {
  height: 46px;
  width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.45rem;
  color: #333;
  border-radius: 50%;
  border: 1px solid #333;
  text-decoration: none;
  font-size: 1.1rem;
  transition: 0.3s;
}

.social-icon:hover {
  color: #4481eb;
  border-color: #4481eb;
}

.social-icon::after {
  display: none ;
}

.social-icon:focus {
  outline: none ;
  box-shadow: none ;
}

.panels-container {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.container:before {
  content: "";
  position: absolute;
  height: 2000px;
  width: 2000px;
  top: -10%;
  right: 48%;
  transform: translateY(-50%);
  background-image: linear-gradient(-45deg, #4481eb 0%, #04befe 100%);
  transition: 1.8s ease-in-out;
  border-radius: 50%;
  z-index: 6;
}

.image {
  width: 100%;
  transition: transform 1.1s ease-in-out;
  transition-delay: 0.4s;
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-around;
  text-align: center;
  z-index: 6;
}

.left-panel {
  pointer-events: all;
  padding: 3rem 17% 2rem 12%;
}

.right-panel {
  pointer-events: none;
  padding: 3rem 12% 2rem 17%;
}

.panel .content {
  color: #fff;
  transition: transform 0.9s ease-in-out;
  transition-delay: 0.6s;
}

.panel h3 {
  font-weight: 600;
  line-height: 1;
  font-size: 1.5rem;
}

.panel p {
  font-size: 0.95rem;
  padding: 0.7rem 0;
}

.btn.transparent {
  margin: 0;
  background: none;
  border: 2px solid #fff;
  width: 130px;
  height: 41px;
  font-weight: 600;
  font-size: 0.8rem;
}

.right-panel .image,
.right-panel .content {
  transform: translateX(800px);
}

/* 动画 */
.container.sign-up-mode:before {
  transform: translate(100%, -50%);
  right: 52%;
}

.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
  transform: translateX(-800px);
}

.container.sign-up-mode .signin-signup {
  left: 25%;
}

.container.sign-up-mode .sign-up-form {
  opacity: 1;
  z-index: 2;
}

.container.sign-up-mode .sign-in-form {
  opacity: 0;
  z-index: 1;
}

.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
  transform: translateX(0%);
}

.container.sign-up-mode .left-panel {
  pointer-events: none;
}

.container.sign-up-mode .right-panel {
  pointer-events: all;
}

.captcha-container {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}

.captcha-img {
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s;
  border: 1px solid #dcdfe6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.captcha-img:hover {
  opacity: 0.9;
  border-color: #c0c4cc;
}

@media (max-width: 870px) {
  .container {
    min-height: 800px;
    height: 100vh;
  }
  .signin-signup {
    width: 100%;
    top: 95%;
    transform: translate(-50%, -100%);
    transition: 1s 0.8s ease-in-out;
  }

  .panels-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 1fr;
  }

  .panel {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 2.5rem 8%;
    grid-column: 1 / 2;
  }

  .right-panel {
    grid-row: 3 / 4;
  }

  .left-panel {
    grid-row: 1 / 2;
  }

  .image {
    width: 200px;
    transition: transform 0.9s ease-in-out;
    transition-delay: 0.6s;
  }

  .panel .content {
    padding-right: 15%;
    transition: transform 0.9s ease-in-out;
    transition-delay: 0.8s;
  }

  .panel h3 {
    font-size: 1.2rem;
  }

  .panel p {
    font-size: 0.7rem;
    padding: 0.5rem 0;
  }

  .btn.transparent {
    width: 110px;
    height: 35px;
    font-size: 0.7rem;
  }

  .container:before {
    width: 1500px;
    height: 1500px;
    transform: translateX(-50%);
    left: 30%;
    bottom: 68%;
    right: initial;
    top: initial;
    transition: 2s ease-in-out;
  }

  .container.sign-up-mode:before {
    transform: translate(-50%, 100%);
    bottom: 32%;
    right: initial;
  }

  .container.sign-up-mode .left-panel .image,
  .container.sign-up-mode .left-panel .content {
    transform: translateY(-300px);
  }

  .container.sign-up-mode .right-panel .image,
  .container.sign-up-mode .right-panel .content {
    transform: translateY(0px);
  }

  .right-panel .image,
  .right-panel .content {
    transform: translateY(300px);
  }

  .container.sign-up-mode .signin-signup {
    top: 5%;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 570px) {
  form {
    padding: 0 1.5rem;
  }

  .image {
    display: none;
  }
  .panel .content {
    padding: 0.5rem 1rem;
  }
  .container {
    padding: 1.5rem;
  }

  .container:before {
    bottom: 72%;
    left: 50%;
  }

  .container.sign-up-mode:before {
    bottom: 28%;
    left: 50%;
  }
}
</style>

